<template>
	<view class="page">
		<nav-bar title="储值卡列表" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view v-if="isLoading" class="common-loading">
			<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
		</view>
		<view class="card" v-else-if="typeList && typeList.length">
			<view class="card-item" v-for="(item, index) in typeList" :key="index">
				<view class="left">
					<image class="img" :src="item.img" mode="aspectFill" />
					<view class="text">储值卡</view>
				</view>
				<view class="right">
					<view class="name">{{ item.ruleName }}</view>
					<view class="money">充{{ item.topUp }}元送{{ item.gift }}元</view>
					<view class="pay" @click="clickRecharge(item)">充值</view>
				</view>
			</view>
		</view>
		<view v-else class="common-no-data">
			<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
			<view class="text">暂无储值卡规则</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import api_storedCard from '@/api/storedCard'
	import pageConfig from '@/config'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				storeId: '',
				typeList: [],
				isLoading: false
			}
		},
		onLoad(options) {
			this.storeId = options.id
			this.getTypeList()
		},
		methods: {
			getTypeList() {
				this.isLoading = true
				const params = {
					storeId: this.storeId
				}
				api_storedCard.fetchStoredType(params).then(res => {
					this.isLoading = false
					if (res.code !== 200) return
					res.data.map(item => {
						item.img = this.baseImgUrl + 'img_store_bg.png'
					})
					this.typeList = res.data
				}).catch(err => {
					this.isLoading = false
				})
			},
			clickRecharge(item) {
				console.log(11111, item);
				this.$tab.navigateTo(`/subPages/storedCard/storedCardHandle?id=${item.id}&storeId=${this.storeId}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;

		.card {
			padding: 36rpx;

			.card-item {
				display: flex;
				border-bottom: 1rpx solid lightgrey;
				padding: 16rpx;

				.left {
					width: 301rpx;
					height: 148rpx;
					position: relative;

					.img {
						width: 301rpx;
						height: 148rpx;
					}

					.text {
						position: absolute;
						font-weight: 600;
						left: calc(50% - 45rpx);
						top: calc(50% - 15rpx);
					}
				}

				.right {
					width: 400rpx;
					margin-left: 24rpx;
					line-height: 50rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.money {
						font-size: 24rpx;
						color: #666666;
					}

					.pay {
						width: 104rpx;
						height: 51rpx;
						background: linear-gradient(90deg, #EACEA7 0%, #DDB382 100%);
						border-radius: 39rpx 39rpx 39rpx 39rpx;
						top: 45rpx;
						right: 16rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
					}
				}

			}
		}
	}
</style>